Introduction

Previously, you learned about the importance of creating an onboarding flow for mobile apps, in order to get new users acquainted with the app and its features as quickly and easily as possible. In this exercise, you’ll put those ideas into practice for a page built with React Native.

Scenario

It’s time to start coding the functionality for the Little Lemon food app. But before new users start placing orders, they’ll need to be registered into the system.

While you won’t create a full onboarding flow here, you’ll get one started by creating a registration page that prompts the user to enter their name and email address.

Design

Below you’ll find a high-fidelity wireframe you can use as a reference for the onboarding flow, but feel free to come up with your own tweaks and personal touches.

Instructions

Step 1: Creating a new folder and file

Create a new folder at the root level of the application named “screens”. This is useful from a code organization standpoint to collocate all React Native components that represent high-level screens or screen containers in the same place.

After that, create a new file inside the "screens" folder called Onboarding.js . This file will export a React component that will render the following:

• a header

• two text inputs to collect the user's name and email respectively

• a button to complete the onboarding process

Step 2: Add the logo and text

Implement a header at the top of the screen with the Little Lemon text. Now add a small logo on the right side of the text.

Step 3: Set up the TextInput components

The validation requirements are as follows:

• The input for the first name can’t be empty and should contain only string characters.

• The input for the email will only accept a properly formatted email address.

Step 4: Add the button

Finally, display a button with the text "Next" at the bottom of the screen, which exhibits the following behavior:

• The button should be disabled if either the first name or email are not valid.

• When the button is pressed, it will not trigger any action (for now). It will come into play when you set up navigation in a later exercise.

Conclusion

In this exercise, you created a new screen file called Onboarding.js to implement the onboarding flow. You utilized the TextInput component to gather information about the user and a button to allow users to complete the onboarding.